<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="./ico/iconfont.css">
		<script src="./jquery.min.js"></script>
		<script src="./d3.min.js"></script>
		<style>
			body,ul{
				margin:0;
				padding:0;
			}
			.abs{
				position:absolute;
				width:200px;
				z-index:10000;
				background-color:rgba(227,244,255,.9);
				cursor:move!important;
			}
			.left {
				float:left;
				width:15%;
			}
			.left ul li{
				list-style-type:none;
				border:1px solid #289de9;
				border-radius: 15px;
				cursor:pointer;
				line-height:26px;
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Chrome/Safari/Opera */
				-khtml-user-select: none; /* Konqueror */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently not supported by any browser */
				margin:4px 1px;
				overflow:hidden
			}
			.left ul li .iconfont{
				width: 26px;
				height: 26px;
				margin: 1px;
				border-radius: 100%;
			}
			.left ul li .iconfont{
				float: left;
				color: #fff;
				font-size: 23px;
				background-color: #289de9;
			}
			.pDiv{
				float:left;
				width:83%;
				height:400px;
				border:5px solid rgb(255,0,0,0.1);
				overflow-y:scroll;
				position:relative;
				overflow-x:hidden;
			}
			.mydiv{
				width:100%;
				height:1200px;
				margin:0 auto;
				/*background-image:url('sqb33-handle.jpg');*/
			}


			.pane-node-content{

				border:1px solid #289de9;
				border-radius: 15px;
				cursor:move;
				line-height:26px;
				-webkit-touch-callout: none; /* iOS Safari */
				-webkit-user-select: none; /* Chrome/Safari/Opera */
				-khtml-user-select: none; /* Konqueror */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently not supported by any browser */
				margin:4px 1px;
				overflow:hidden;
				-webkit-transition: all .5s;
                -moz-transition: all .5s;
                -ms-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;

			}
			.pane-node-content:hover{
				background-color:rgba(227,244,255,.9);

			}
			.pane-node-content .iconfont{
				width: 26px;
				height: 26px;
				margin: 1px;
				border-radius: 100%;
			}
			.pane-node-content .iconfont{
				float: left;
				color: #fff;
				font-size: 23px;
				background-color: #289de9;
			}
			.mycursor{
				cursor:crosshair;
			}
		</style>
	</head>
	<body>
	<div class='left'>
		<ul>
			<li>
			<span class="iconfont icon-dataBase"></span>
			 存储过程
			</li>
			<li>
			<span class="iconfont icon-SQLshujuji"></span>
			SQL脚本
			</li>
			<li>
			<span class="iconfont icon-icon-dian"></span>
			类型转换
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			 归一化
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			拆分
			</li>
			<li>
			<span class="iconfont icon-jiedianchaifen"></span>
			全表统计
			</li>
		</ul>
	</div>
	<div class="pDiv">
		<svg  id="mydiv" class="mydiv" xmlns="http://www.w3.org/2000/svg" version="1.1" onload="init(evt)"  transform="translate(0,0) scale(1)">
			<defs>
			  <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
				<path d="M2,2 L2,11 L10,6 L2,2"style="fill: #000000;" />
			  </marker>
			</defs>
		  <g class="pane-cell pane-node" transform="translate(40,40)">
			<foreignObject width="180" height="30">
				<body
					xmlns="http://www.w3.org/1999/xhtml">
					<div class="pane-node-content">
						<span class="iconfont icon-dataBase"></span>
						<span></span>
						<span class="name">写数据表-1</span>
						<span class="status icon-warning-o"></span>
					</div>
				</body>
			</foreignObject>
			<circle id="c1" cx="90" cy="33" r="6" stroke="#999" stroke-width="1" fill="#fff" class="mycursor" onmouseover="changeColor1(evt)" onmouseout="changeColor2(evt)"/>
		  </g>
		  <g class="pane-cell pane-node" transform="translate(180,225)">
			<foreignObject width="180" height="30">
				<body
					xmlns="http://www.w3.org/1999/xhtml">
					<div class="pane-node-content">
						<span class="iconfont icon-dataBase"></span>
						<span></span>
						<span class="name">写数据表-1</span>
						<span class="status icon-warning-o"></span>
					</div>
				</body>
			</foreignObject>
			<circle cx="90" cy="33" r="6" stroke="#999" stroke-width="1" fill="#fff" class="mycursor" onmouseover="changeColor1(evt)" onmouseout="changeColor2(evt)"/>
		  </g>
		</svg>
	</div>
	<script>

			var startX, startY, diffX, diffY;
			var startL,startT;
			var currRectId = null;
			
			$(function(){
				
				startL = $('#mydiv').offset().left;
				startT = $('#mydiv').offset().top;		
				$('#mydiv').width($('#mydiv').parent().width());
				
				var disX = 100;
				var disY = 10;
				var li_id = 0;
				var anim_top = 0;
				var anim_left = 0;
				
				$('.left ul li').mousedown(function(ev) {
					anim_top = $(this).position().top;
					anim_left = $(this).position().left;
					
					$li = $(this.outerHTML);
					$li.addClass('abs');
					$li.css({'top':ev.pageY - disY,'left':ev.pageX - disX});
					$li.attr('id','li_' + ++li_id);
					$('.left ul').append($li);
					
					
					$(document).mousemove(function(ev) {
						$('#li_' + li_id).css('left', ev.pageX - disX);
						$('#li_' + li_id).css('top', ev.pageY - disY);
					});
					$(document).mouseup(function() {
						$('#li_' + li_id).animate({top:anim_top,left:anim_left},null,null,function(){
							$(this).remove();
						});

						$(document).off();
					});
					return false;
				});

			});

			function changeColor1(evt)
			{
			var rect = evt.target;
			rect.setAttributeNS(null, "fill", "#ccc")
			}
			function changeColor2(evt)
			{
			var rect = evt.target;
			rect.setAttributeNS(null, "fill", "#fff")
			}

			window.onload = function(e) {
                e = e || window.event;
                document.onmousedown = function(e) {
                    Grab(e);
                }
                document.onmousemove = function(e) {
                    Drag(e);
                }
                document.onmouseup = function(e) {
                    Drop(e);
                }

            }


			var svgDoc = null;
			var svgRoot = null;
			var trueCoords = null;//记录元素在视口中的实际坐标
			var grabCoords = null;//表示视图经过缩放或移动后的点在视口中的坐标
			var backDrop = null;
			var GrabPoint = null;
			var DragTarget = null;
			var line_start = {};
			var my_line = null;
			var p1 = null;
			var p2 = null;

			function init(evt) {
				svgDoc = evt.target.ownerDocument;
				svgRoot = evt.target;
				//两个不显示的点
				trueCoords = svgRoot.createSVGPoint();
				GrabPoint = svgRoot.createSVGPoint();
				//定义了画布，作为拖动时间的透明背景层使用，接收所有的触发事件
				//这样做主要是为了避免因为拖动鼠标速度太快，而离开了被拖拽的元素，导致鼠标的onmousemove事件无法产生
				//有了这个层，无论被拖拽的元素是否跟得上鼠标的脚步，在这个层都能产生鼠标onmousemove事件
				backDrop = svgDoc.getElementById("BackDrop");
			}

			//获得当前元素在视口中的坐标位置的函数
			function GetTrueCoords(evt) {
				var newScale = svgRoot.currentScale;//currentScale获得当前视图的伸缩比例
				var translation = svgRoot.currentTranslate;//currentTranslate获得当前视图的平移量
				trueCoords.x = (evt.clientX - translation.x) / newScale;
				trueCoords.y = (evt.clientY - translation.y) / newScale;
				// console.log(svgRoot.transform.animVal[0].matrix.e);
				// console.log(getPosition(evt));
			}

			function GetTrueCoords2(evt) {
				var newScale = svgRoot.currentScale;//currentScale获得当前视图的伸缩比例
				var translation = svgRoot.currentTranslate;//currentTranslate获得当前视图的平移量
				line_start = {};
				line_start.x = (evt.clientX - translation.x) / newScale;
				line_start.y = (evt.clientY - translation.y) / newScale;
				var xy = getPosition(evt);
				line_start.x = xy.x;
				line_start.y = xy.y;

				// console.log(evt.clientX);
				// console.log(evt.screenX);
				// console.log(translation.x);
				// console.log(svgRoot);
				// console.log(newScale);
				// console.log(line_start.x);
			}

			//鼠标按下触发的事件
			function Grab(evt) {

				var targetElement = evt.target;//取得要拖动的DOM Object

				if($(targetElement).attr('class') == 'mydiv' ){
				    var translation = svgRoot.currentTranslate;//currentTranslate获得当前视图的平移量
				    $(targetElement).attr("transform", "translate(" + translation.x + " " + translation.y + ")" + " scale(" + 1 + ")")
					return;
				}

				if($(targetElement).attr('class') == 'mycursor'){
				    GetTrueCoords2(evt);
				    GetTrueCoords(evt);
				    // console.log($(targetElement)[0].getBBox())
				    return;
				}

				GetTrueCoords(evt);
				var g = $(targetElement).parents('g')[0];

				if(g){
				    DragTarget = g;
				}

				if(!DragTarget) return;

				DragTarget.parentNode.appendChild(DragTarget);//把要拖动的元素加入到它的父节点中，类似于在绘图软件中常见的”至于最上方“的操作

				DragTarget.setAttributeNS(null, "pointer-events", "none");//取消要拖动元素的鼠标接收事件
				//这样可以保证当鼠标释放时所触发的事件的”主人“不是要拖动的元素本身，而是它所覆盖的元素，画布或其他元素

				var Matrix = DragTarget.getCTM();//获取当前SVG的坐标转换矩阵
				GrabPoint.x = trueCoords.x - Number(Matrix.e);//定义元素移动后在视图中的坐标
				GrabPoint.y = trueCoords.y - Number(Matrix.f);
				// console.log(GrabPoint);
			}

			//拖动鼠标触发的事件
			function Drag(evt) {
				GetTrueCoords(evt);//获取当前元素在视口的实际坐标
				if (DragTarget) { //判断被拖动元素是否存在
					var newX = trueCoords.x - GrabPoint.x;
					var newY = trueCoords.y - GrabPoint.y;
					console.log(trueCoords.x + '-->' + GrabPoint.x)
					console.log(trueCoords.y + '-->' + GrabPoint.y)
					console.log(newX + '--' + newY)
					DragTarget.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + ")");//设置元素的平移变化参数 实际效果就是被拖动的元素随着鼠标不断移动
				}else if(line_start&&line_start.x){
					// var newX = trueCoords.x - GrabPoint.x;
					// var newY = trueCoords.y - GrabPoint.y;
					var newX = line_start.x - GrabPoint.x;
					var newY = line_start.y - GrabPoint.y;
					if(!my_line){
					    my_line = document.createElementNS( "http://www.w3.org/2000/svg", "path");
					    my_line.setAttribute('d',getPathd(newX,newY,evt.clientX,evt.clientY) );
					    my_line.setAttribute('stroke-width','2');
					    my_line.setAttribute('stroke','gray');
					    my_line.setAttribute('fill','none');
					    my_line.setAttribute('style','marker-end: url(#markerArrow);');
					    // my_line.setAttribute('stroke-dasharray','3,3');
						document.getElementById( "mydiv" ).appendChild(my_line);
					}else{
					    var xy = getPosition(evt);
					    my_line.setAttribute('d',getPathd(newX,newY,xy.x,xy.y) );
					}
				}


			}


			function getPathd1(x0,y0,x4,y4){
				var x1,y1,x2,y2,unit,ret,t;
				x1 = (x4 - x0)/2 + x0;
				y1 = (y4 - y0)/2 + y0;
				ret = ['M ' + x0 ,' ', y0, ' L ', x1,' ', y1, ' L ', x4, ' ', y4 ].join("");
				return ret;
			}

			function getPathd(x0,y0,x4,y4){
				var x1,y1,x2,y2,unit,ret,t;
				unit = x4 - x0;
				t = (x4-x0)/(y4-y0);
				if(0.1 < t || t < 1){
				    x1 = x0 + unit * 0.39;
					y1 = y0 + unit * 0.85;
					x2 = x0 + unit * 0.7;
					y2 = y0 + unit * 0.35;
				}else if(t > 1){
					x1 = x0 + unit * 0.1;
					y1 = y0 + unit * 0.88;
					x2 = x0 + unit * 1;
					y2 = y0 + unit * 0.13;
				}else{
				    x1 = x0 + unit * 0.57;
					y1 = y0 + unit * 0.57;
					x2 = x0 + unit * 0.57;
					y2 = y0 + unit * 0.57;
				}
				console.log(t)
				if(!p1){
					p1 = document.createElementNS( "http://www.w3.org/2000/svg", "circle");
					p1.setAttribute('stroke-width','2');
					p1.setAttribute('stroke','gray');
					p1.setAttribute('fill','red');
					p1.setAttribute('cx',x1);
					p1.setAttribute('cy',y1);
					p1.setAttribute('r',5);
					document.getElementById( "mydiv" ).appendChild(p1);

					p2 = document.createElementNS( "http://www.w3.org/2000/svg", "circle");
					p2.setAttribute('stroke-width','2');
					p2.setAttribute('stroke','gray');
					p2.setAttribute('fill','blue');
					p2.setAttribute('cx',x2);
					p2.setAttribute('cy',y2);
					p2.setAttribute('r',5);
					document.getElementById( "mydiv" ).appendChild(p2);
				}else{
				    p1.setAttribute('cx',x1);
					p1.setAttribute('cy',y1);

					p2.setAttribute('cx',x2);
					p2.setAttribute('cy',y2);
				}
				ret = ['M ' + x0 ,' ', y0, ' C ', x1,' ', y1, ' ', x2, ' ', y2, ' ', x4, ' ', y4 ].join("");
				return ret;
			}

			function getPathd2(x0,y0,x4,y4){
				var x2,y2,rate,ret;
				x2 = Math.min(x0,x4) + Math.abs(x0-x4);
				y2 = Math.min(y0,y4) + Math.abs(y0-y4);
				rate = 0.5;
				var x0y0 = [Math.abs(x4-x0) * rate,Math.abs(y4 - y0) * rate]
				console.log(x0y0);
				ret = ['M ' + x0 ,' ', y0, ' Q ', x0y0[0],' ', x0y0[1], ' ', x2, ' ', y2, ' T ', x4, ' ', y4 ].join("");
				console.log(ret);
				return ret;
			}

			function Drop(evt) {//evt不是要拖动的元素本身，而是它所覆盖的元素，画布或其他元素
				if (DragTarget) {
					var targetElement = evt.target;
					DragTarget.setAttributeNS(null, "pointer-events", "all");//恢复要拖动元素的鼠标接收事件
					DragTarget = null;
				}
				line_start = null;
				my_line = null;
			}


			var getPosition = function(event){
				var evt = event||window.event;
				var srcObj = evt.target || evt.srcElement;
				if (evt.offsetX){
					return {
						x:evt.offsetX,
						y:evt.offsetY
					};
				}else{
					var rect = srcObj.getBoundingClientRect();
					return {
						x:evt.clientX - rect.left,
						y:evt.clientY - rect.top
					}
				}
			};
			
		</script>
	</body>
</html>